<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			svg {
				border: 5px solid black;
			}

		</style>
	</head>
	<body>
		<!-- 默认画布大小 300 * 150 -->
		<svg width="600" height="200">
			<!-- 
				矩形 
				x: x坐标
				y: y坐标
				rx: 圆角的x方向半径
				ry: 圆角的y方向半径
			-->
			<rect width="100" height="100" x="10" y="10" rx="10" ry="20" />
			<!-- 
				圆形
				cx: 圆心x的坐标
				cy: 圆心y的左边
				r: 半径
			 -->
			<circle cx="200" cy="55" r="50"></circle>
			
			<!-- 
				rx: x轴半径
				ry: y轴半径
				cx, cy圆心位置
			 -->
			<ellipse rx="100" ry="50" cx="360" cy="55"></ellipse>

			<!-- 
				线条
				x1, y1: 起点位置
				x2, y2: 终点位置
			 -->
			<line x1="480" y1="60" x2="570" y2="50" stroke-width="5" stroke="red"></line>



		</svg>
		<br>

		<svg width="400" height="400">
			<!-- 折线 -->
			<polyline points="0 50, 50 50, 50 100, 100 100, 100 150, 150 150, 150 200, 200 200, 200 250, 250 250, 250 300, 300 300, 300 350, 350 350, 350 400" stroke-width="2" stroke="blue" fill="white"></polyline>

		</svg>
		<br>
		<svg width="300" height="300">
			<!-- 多边型 -->
			<polygon points="0 0, 200 200, 300 50" fill="blue"></polygon>
		</svg>


		
	</body>
</html>